<html>
    <head>
        {foreach item=sd from=$seldest}
            {assign var='id' value=$sd.id}
            {assign var='pid' value=$sd.id}
            {assign var='curselection' value=$sd.country}
            {assign var='color1' value=$sd.color1}
            {assign var='color2' value=$sd.color2}
        {/foreach}

        {*assign var='cities' value=''}
        {foreach item=ci from=$city}
            {$cities = $cities|cat:'"Start from '|cat:$ci.city|cat:'",'}
        {/foreach*}
        
        {assign var=cities value=$cities}
        
        {assign var='category' value=''}
        {foreach item=pc from=$packcategory}
            {append var='category' value=$pc.package}
        {/foreach}
        
        {*$cities = $cities|substr:0:($cities|strlen-1)*}

        <title>{$title|default:"no title"}</title>

        {literal}
        <link href="css/fontstyle.css" rel="stylesheet" type="text/css" charset="utf-8" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />

        <link rel="stylesheet" href="css/jqx.base.css" type="text/css" />

        <style type="text/css">
            a { color: black; }
            a:hover {color: red; }

            .gradientcatmenu_sm {
                font-family:'Myriad Pro';
                font-size: 14px;
                font-weight: bold;
                background: #{/literal}{$color1}{literal};
                background: -moz-linear-gradient(left,  #{/literal}{$color1}{literal} 0%, #{/literal}{$color2}{literal} 50%, #{/literal}{$color1}{literal} 100%);
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,#{/literal}{$color1}{literal}), color-stop(50%,#{/literal}{$color2}{literal}), color-stop(100%,#{/literal}{$color1}{literal}));
                background: -webkit-linear-gradient(left,  #{/literal}{$color1}{literal} 0%,#{/literal}{$color2}{literal} 50%,#{/literal}{$color1}{literal} 100%);
                background: -o-linear-gradient(left,  #{/literal}{$color1}{literal} 0%,#{/literal}{$color2}{literal} 50%,#{/literal}{$color1}{literal} 100%);
                background: -ms-linear-gradient(left,  #{/literal}{$color1}{literal} 0%,#{/literal}{$color2}{literal} 50%,#{/literal}{$color1}{literal} 100%);
                background: linear-gradient(left,  #{/literal}{$color1}{literal} 0%,#{/literal}{$color2}{literal} 50%,#{/literal}{$color1}{literal} 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{/literal}{$color1}{literal}', endColorstr='#{/literal}{$color2}{literal}',GradientType=1 );

                color: white;
                box-shadow: 5px 5px 5px #888888;
                -moz-box-shadow:    5px 5px 5px #888888;
                -webkit-box-shadow: 5px 5px 5px #888888;
            }
            .gradientcatmenu_sm a {
                color: white;
                text-decoration: none;
            }
            .sortlabel {
                padding-top: 4px;
                font-family:'Myriad Pro';
                font-size: 14px;
                padding-left: 10px;
            }
            .triangle-down {
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px #{/literal}{$color2}{literal} solid;
                vertical-align: top;
                margin-top: -10px;
            }
            .triangle-topleft {
                width: 0;
                height: 0;
                border-top: 10px solid #{/literal}{$color2}{literal};
                border-left: 10px solid transparent;
                padding-top: 8px;
            }
            .triangle-topright {
                width: 0;
                height: 0;
                border-top: 10px solid #{/literal}{$color2}{literal};
                border-right: 10px solid transparent;
                padding-top: 8px;
            }

            #packages {
                /* width: 900px; */
                width: 85%;
                height: 550px;
                overflow: hidden;
                background-color: transparent;
            }
        </style>

        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

        <script type="text/javascript" src="js/gettheme.js"></script>

        <script type="text/javascript" src="js/jqxcore.js"></script>
        <script type="text/javascript" src="js/jqxbuttons.js"></script>
        <script type="text/javascript" src="js/jqxscrollbar.js"></script>
        <script type="text/javascript" src="js/jqxlistbox.js"></script>
        <script type="text/javascript" src="js/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="js/jPaginate.js"></script>
        <script src="js/jquery.ui.widget.js"></script>
        <script src="js/jquery.ui.accordion.js"></script>

        <script>
            $(function() {
                $( "#accordion" ).accordion();
            });
        </script>
        
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-33771657-1']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>

        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                //initpage();

                var theme = getTheme();
                var source = ["Special Offer","Lower Price","Alphabet"];
               
                // Create a jqxDropDownList
                $("#cbosort").jqxDropDownList({ 
                    source: source,
                    autoDropDownHeight: true,
                    selectedIndex: 0,
                    width: '150',
                    height: '25',
                    theme: theme });
                $('#cbosort').bind('select', function (event) {
                    var args = event.args;
                    //var item = $('#cbosort').jqxDropDownList('getSelectedIndex', args.index);
                    var idx = $('#cbosort').jqxDropDownList('getSelectedIndex');

                    var packageid = document.getElementById("selectedpackage").value;

                    var item = $('#cbosort').jqxDropDownList('getItem', args.index);
                    

                    getpackages('{/literal}{$id}{literal}',packageid, item.label);
                });

                $("#individual_triangle").show();
                $("#group_triangle").hide();
                $("#land_triangle").hide();

                var idname = 'packagesmenu';
                //alert(idname);
                document.getElementById(idname).classList.add('current_menu');
            });


            function previous(){

                new_page = parseInt($('#current_page').val()) - 1;
                //if there is an item before the current active link run the function
                if($('.active_page').prev('.page_link').length==true){
                    go_to_page(new_page);
                }
            }

            function next(){
                new_page = parseInt($('#current_page').val()) + 1;
                //if there is an item after the current active link run the function
                if($('.active_page').next('.page_link').length==true){
                    go_to_page(new_page);
                }
            }

            function go_to_page(page_num){
                //get the number of items shown per page
                var show_per_page = parseInt($('#show_per_page').val());

                //get the element number where to start the slice from
                start_from = page_num * show_per_page;

                //get the element number where to end the slice
                end_on = start_from + show_per_page;

                //hide all children elements of packages div, get specific items and show them
                $('#packages').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

                /*get the page link that has longdesc attribute of the current page and add active_page class to it
                and remove that class from previously active page link*/
                $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

                //update the current page input field
                $('#current_page').val(page_num);
            }

            function getpackages(destid, packageid,currlabel) {
                var category = '';
                var selIndex = 0;
                selIndex = $("#cbosort").jqxDropDownList('getSelectedIndex');

                showtriangle(packageid);

                document.getElementById("selectedpackage").value = packageid;
                document.getElementById("selectedsort").value = selIndex;

                $("#packages").html("<center><img src='images/loader_big.gif' /></center>");
                jQuery.ajax({
                    url: 'getpackages.php',
                    data: {
                        'destid'        : destid,
                        'packageid'     : packageid,
                        'sortfield'     : selIndex,
                        'label'         : currlabel
                    },
                    type: 'post',
                    success: function(json) {
                        $("#packages").html(json);

                        /* pagination */
                        $("#rightframecontent").find('ul').remove();
                        $("#packages").jPaginate({elementtag: 'tr'});
                        /* end pagination */

                        //update breadcrumb
                        jQuery.ajax({
                            url: 'getcategory.php',
                            data: {
                                'packageid'     : packageid
                            },
                            type: 'post',
                            success: function(json2) {
                                category = json2;
                                //document.getElementById('container_breadcrumb').innerHTML = 'Home > Our Packages > '+'{/literal}{$curselection}{literal} > ' + category;
                                $('#container_breadcrumb').html("<a href='index.php'>Home</a> > <a href='ourpackages.php'>Our Packages</a> > "+"<a href='packagecategory.php?id={/literal}{$id}{literal}&s='>{/literal}{$curselection}{literal}</a> > " + category);
                                $("#cbosort").jqxDropDownList('selectIndex', selIndex);
                            }
                        })
                        //end update breadcrumb

                        //update package description

                        jQuery.ajax({
                            url: 'getpackagedesc.php',
                            data: {
                                'packageid'     : packageid
                            },
                            type: 'post',
                            success: function(json3) {
                                $('#packagedescription').html(json3);
                            }
                        })
                            
                        //end update package description
                    }
                })
            }

            function showtriangle(packageid) {
                if (packageid == 1) {
                    $("#individual_triangle").show();
                    $("#group_triangle").hide();
                    $("#land_triangle").hide();
                } else if (packageid==2) {
                    $("#individual_triangle").hide();
                    $("#group_triangle").show();
                    $("#land_triangle").hide();
                } else {
                    $("#individual_triangle").hide();
                    $("#group_triangle").hide();
                    $("#land_triangle").show();
                }
            }
            
        </script>

        {/literal}
    </head>
    <body id='about' onload="getpackages('{$id}','1','');">
        {include file='header.tpl'}

        <div id="container_breadcrumb">
            Home > Our Packages > {$curselection} >
        </div>

        <div id="container_package">
            <input type="hidden" id="selectedpackage" />
            <input type="hidden" id="selectedsort" />
            <input type='hidden' id='current_page' />
            <input type='hidden' id='show_per_page' />

            <table border="0"
                   width="100%" 
                   cellspacing="0" 
                   cellpadding="0">
                <tr valign="top">
                    <td width="25%" valign="top">
                        <div id="leftframetitle">
                            <span class="red_color">OUR</span><span class="black_color">PACKAGES</span>
                        </div>

                        <div id="accordion">                            
                            {foreach item=d from=$dest}
                                <p id="leftframecontent">
                                    <img class="packagebutton" src="{$d.button_img}" />
                                    <a href="#" class="packagelink"
                                       onmouseover="changeImages('worldmap_01', '{$d.image}'); return true;"
                                       onmouseout ="changeImages('worldmap_01', 'images/worldmap_01.gif'); return true;"
                                       onmousedown="changeImages('worldmap_01', '{$d.image}'); return true;"
                                       onmouseup  ="changeImages('worldmap_01', '{$d.image}'); return true;"
                                       >{$d.country|upper}</a>
                                </p>
                                <div>
                                    <ul style="list-style: none; padding-left: 90px;">
                                        {foreach item=c from=$cities}
                                            <li><a href="packagecategory.php?id={$d.id}&c={$c.city}">From {$c.city}</a></li>
                                        {/foreach}                                        

                                    </ul>
                                </div>
                            {/foreach}
                        </div>
                    </td>
                    <td>
                        <div id="rightframecontent">
                            <div>
                                <table border="0" width="90%" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="20%" class="gradientcatmenu_sm" align="center">
                                            <a href="#" onclick="getpackages('{$id}','1',''); return true;">
                                                {$category[1]|upper}
                                            </a>
                                        </td>
                                        <td width="1%" class="gradientcatmenu_sm" align="center">
                                            <img src="images/separator.png" />
                                        </td>
                                        <td width="20%" class="gradientcatmenu_sm" align="center">
                                            <a href="#" onclick="getpackages('{$id}','2','');">
                                                {$category[2]|upper}
                                            </a>
                                        </td>
                                        <td width="1%" class="gradientcatmenu_sm" align="center">
                                            <img src="images/separator.png" />
                                        </td>
                                        <td width="20%" class="gradientcatmenu_sm" align="center">
                                            <a href="#" onclick="getpackages('{$id}','3','');">
                                                {$category[3]|upper}
                                            </a>
                                        </td>
                                        <td width="1%" class="gradientcatmenu_sm" align="center">
                                            <img src="images/separator.png" />
                                        </td>
                                        <td width="30%" class="gradientcatmenu_sm" align="left">
                                            <div class="sortlabel">Sort by</div>
                                            <div id='cbosort' class='sortcombo'></div>
                                        </td>
                                    </tr>

                                    <tr>                                    
                                        <td width="20%" align="center">
                                            <table border="0" width="100%" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="45%">
                                                        <div class="triangle-topleft" id="triangle_left"></div>
                                                    </td>

                                                    <td>
                                                        <div class="triangle-down" id="individual_triangle"></div>
                                                    </td> 
                                                </tr>
                                            </table>
                                        </td>
                                        <td width="1%" align="center">
                                            &nbsp;
                                        </td>
                                        <td width="20%" align="center">
                                            <div class="triangle-down" id="group_triangle"></div>
                                        </td>
                                        <td width="1%" align="left">
                                            &nbsp;
                                        </td>
                                        <td width="20%" align="center">
                                            <div class="triangle-down" id="land_triangle"></div>
                                        </td>
                                        <td width="1%" align="left">
                                            &nbsp;
                                        </td>
                                        <td align="right">
                                            <div class="triangle-topright" id="triangle_right"></div>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                            <!-- here -->

                            <div id="packagedescription" class="packagedescription">
<!--                                <img src='images/loading.gif' />-->
                            </div>
                            <div id="packages">
                                No Packages Found
                            </div>
                        </div>


                    </td>
                </tr>
            </table>

            <!-- <div id='page_navigation'>pagination</div> -->

            <div id="footer-spacer"></div>
        </div>

        {include file='footer.tpl'}

    </body>
</html>